@layout("/common.html",{css:["/assets/css/order.css"]}){
        <style type="text/css">
         .paytp ul {
         	list-style: none;
         	margin:0;
         	padding:0;
         	display:flex;
         }
         .paytp ul li:not(:first-child){
         	margin-left:18px;
         }
         .paytp li {
		    width: 174px;
		    height: 60px;
		    line-height: 60px;
		    border: 1px solid #e0e0e0;
		    text-align: center;
		    cursor: pointer;
		    overflow: hidden;
		    -webkit-transition: all .4s;
		    transition: all .4s;
		    list-style: none;
         }
         .paytp li img {
         	cursor: pointer;
		    margin-left: 0;
		    opacity: 1;
		    width: 174px;
		    height: 60px;
         }
         
         .selected {
		    border-color: #ff6700 !important;
		 }
        </style>

        <div class="body">
            <div class="content">
				<div class="page-title">订单支付</div>
				<div class="order-detail">
					<div class="order-detail-item">
						<div class="order-detail-item__title">商品详情</div>
						<div class="order-detail-item__content">
							<div class="service-detail-card">
								<div class="service-detail-card__headImg" style="overflow: hidden;">
									<img src="${data.mainPic}" style="width:100%;" >
								</div>
								<div class="service-detail-card__info">
									<div class="title">${data.name}</div>
									<div class="desc">${data.ms}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="order-detail-item" style="padding-top: 0px; padding-bottom: 0px;">
						<div class="order-detail-item__title" style="padding: 26px 0px;">订单编号</div>
						<div class="order-detail-item__content" style="padding: 26px 0px;">
							<div class="package-info">
								<input type="hidden" value="${order.orderNum}" id="oid" />
								<div class="package-info__name">${order.orderNum}</div>
							</div>
						</div>
					</div>
					<div class="order-detail-item" style="padding-top: 0px; padding-bottom: 0px;">
						<div class="order-detail-item__title" style="padding: 26px 0px;">支付金额</div>
						<div class="order-detail-item__content" style="padding: 26px 0px;">
							<div class="package-info">
								<div class="package-info__name">￥${order.tjiage}</div>
							</div>
						</div>
					</div>
					<div class="order-detail-item" style="padding-top: 0px; padding-bottom: 0px;">
						<div class="order-detail-item__title" style="padding: 26px 0px;">订单日期</div>
						<div class="order-detail-item__content" style="padding: 26px 0px;">
							<div class="package-info">
								<div class="package-info__name">${order.createTime}</div>
							</div>
						</div>
					</div>
					@if(order.state==0){
					<div class="order-detail-item" style="padding-top: 0px; padding-bottom: 0px;">
						<div class="order-detail-item__title" style="padding: 26px 0px;">支付方式</div>
						<div class="order-detail-item__content" style="padding: 26px 0px;">
							<div class="package-info paytp">
								<ul class="pt">
									<li data="alipay" class=""><img data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/031f3af10e3856352b847fe480b2b2e5.png" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/031f3af10e3856352b847fe480b2b2e5.png" lazy="loaded"></li>
									<li data="wechatpay" class=""><img data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4cdfb179cdce8f95c57e8d82c469d20c.png" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4cdfb179cdce8f95c57e8d82c469d20c.png" lazy="loaded"></li>
								</ul>
							</div>
						</div>
					</div>
					@}
					
					@if(order.state==1){
					<div class="order-detail-item" style="padding-top: 0px; padding-bottom: 0px;">
						<div class="order-detail-item__title" style="padding: 26px 0px;">支付日期</div>
						<div class="order-detail-item__content" style="padding: 26px 0px;">
							<div class="package-info">
								<div class="package-info__name">${order.payTime}</div>
							</div>
						</div>
					</div>
					<div class="order-detail-item" style="padding-top: 0px; padding-bottom: 0px;">
						<div class="order-detail-item__title" style="padding: 26px 0px;">支付方式</div>
						<div class="order-detail-item__content" style="padding: 26px 0px;">
							<div class="package-info">
								@if(order.payType == 'alipay'){
								<div class="package-info__name">支付宝</div>
								@}
								@if(order.payType == 'wechatpay'){
								<div class="package-info__name">微信支付</div>
								@}
							</div>
						</div>
					</div>
					@}
					
				</div>
				
				@if(order.state==1){
				<div class="certain-row">
					<div class="pay-actions">
						<div class="price">
							<div style="font-size: 22px; color: rgb(250, 157, 59); line-height: 20px;">
								已购买
							</div>
						</div>
						<a href="javascript:;" id="download" class="btn">下载</a>
					</div>
				</div>
				@}
				@if(order.state==0){
				<div class="certain-row">
					<div class="pay-actions">
						<div class="price">
							<div style="color: rgba(0, 0, 0, 0.5); font-size: 14px; word-break: keep-all; line-height: 17px; margin-right: 10px;">总价</div>
							<div style="font-size: 22px; color: rgb(250, 157, 59); line-height: 20px;">
								￥${data.jiage}
							</div>
						</div>
						<a href="javascript:;" id="topay" class="btn">支付</a>
					</div>
				</div>
				@}
            </div>
        </div>

	    <script src="${ctxPath}/assets/js/jquery.qrcode.min.js"></script>
	    <script src="${ctxPath}/assets/js/payorder.js"></script>
@}